<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-生命周期</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" @click="msg='no'" value="切换"/>
        <h4 id="h4">{{ msg }}</h4>
    </div>

    <script>
            var vue = new Vue({
            el: '#app',
            data:{
                msg: 'hello vue'
            },
            methods:{
                show(){
                    console.log("进入了show方法")
                }
            },
           //创建阶段
            beforeCreate(){ //第一个生命周期函数.实例创建前调用
                //在vue实例创建之前调用，所以data和methods获取不到
               /* console.log(this.msg);
                this.show();*/

            },
            created(){ //第二个，实例创建完后调用
                //可以获取到data和methods
               /* console.log(this.msg);
                this.show()*/
            },
            beforeMount(){//第三个，模板编译后的内容加载到内存中
                //这时页面上还不是最新的渲染后的数据
                // console.log(document.getElementById("h4").innerText)
            },
            mounted(){//第四个，模板加载到页面上
                //这时可以获取到最新的值
               /* console.log(document.getElementById("h4").innerText)*/
            },

            //运行阶段
            beforeUpdate(){//model层数据被修改时，会触发
                //页面上还是旧的
                //console.log(document.getElementById("h4").innerText)
            },

            updated(){ //内存中更新的dom树加载到页面上后触发
                console.log(document.getElementById("h4").innerText)
            },

            //销毁阶段
            beforeDestroy(){//关闭浏览器时触发
                //此时data,methods,filter等还在
                console.log(this.msg)
            },

             destroyed(){
                console.log(this.msg)
             }
        });

    </script>
</body>
</html>